<template>
  <a-popover v-model:open="open" trigger="hover" placement="bottomLeft" :align="{ offset: [0, -1] }" overlay-class-name="w-[720px]">
    <template #content>
      <div class="bg-primary text-white px-4 py-2 flex">
        <div class="w-5/6">
          <div class="flex justify-between mt-2">
            <div class="w-28 flex justify-between">
              <p class="flex items-center">
                <img v-if="filesInfo?.brXb === '男'" class="w-[16px] h-[16px] mr-2" src="../../../assets/images/icon-man.png" />
                <img v-if="filesInfo?.brXb === '女'" class="w-[16px] h-[16px] mr-2" src="../../../assets/images/icon-woman.png" />
                <span>{{ filesInfo?.brXb || '-' }}</span>
              </p>
              <span>{{ filesInfo?.brAge || '-' }}</span>
            </div>
            <div class="flex-1 flex ml-16">
              <p class="flex items-center">
                <img class="w-[15px] h-[15px] mr-1" src="../../../assets/images/icon-rh.png" />
                <span>{{ filesInfo?.brXx || '血型：-' }}</span>
              </p>
              <span class="ml-8">{{ filesInfo?.rhxx }}</span>
              <span class="ml-8">{{ filesInfo?.brMz }}</span>
              <span class="ml-8">{{ filesInfo?.brHf }}</span>
            </div>
          </div>
          <div class="flex mt-1">
            <div class="w-28 flex items-center">
              <img class="w-[13px] h-[13px] mr-2" src="../../../assets/images/icon-phone.png" />
              <span>{{ filesInfo?.brMob || '手机号：-' }}</span>
            </div>
            <span class="ml-16">{{ filesInfo?.provincesCityDistrict }} {{ filesInfo?.brJtdz }}</span>
          </div>
        </div>
        <div class="flex-1 flex justify-end items-center">
          <!-- <a-button size="small" ghost @click="onEdit">编辑</a-button> -->
          <img class="cursor-pointer -mt-8" src="../../../assets/images/icon-edit.png" alt="" @click="onEdit()" />
        </div>
      </div>
      <div class="mt-2 pb-4">
        <div class="flex items-center px-4">
          <span class="font-semibold">预约信息</span>
        </div>
        <div class="px-4 pb-2">
          <BaseTable :loading="loading" class="table-style" height="200" column-code="000766" :data-source="tableData">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'action'">
                <a-button type="link" size="small" @click="onEditBooking(record)"> 修改 </a-button>
              </template>
            </template>
          </BaseTable>
        </div>

        <div class="flex items-center px-4">
          <img class="w-[17px] h-[16px] mr-3" src="../../../assets/images/icon-info.png" alt="" />
          <span class="font-semibold">就诊信息</span>
        </div>
        <div class="flex px-4 mt-4">
          <LabelValue label="科室就诊" :value="`${filesInfo?.ksjz || '-'}次`" :width="120" label-class="text-grey" />
          <!-- <LabelValue label="最近接诊" :value="filesInfo?.zjjzr" :width="140" /> -->
          <div class="flex ml-10">
            <div class="text-grey">累计缴费 :</div>
            <div class="flex items-center">
              <span>￥{{ formatAmount(filesInfo?.accumulatedPayment) }}</span>
              <a-popover placement="top">
                <template #content>
                  <div class="px-4 py-2">
                    <div v-for="(item, index) in filesInfo?.sflbResponseList" :key="index">
                      <span>{{ item.mc }}：</span>
                      <span>￥{{ formatAmount(item.je) }}</span>
                    </div>
                  </div>
                </template>
                <img class="ml-1 cursor-pointer" src="../../../assets/images/icon-In.png" alt="" />
              </a-popover>
            </div>
          </div>
          <div class="flex ml-16">
            <div class="text-grey">最近接诊 <span> :</span></div>
            <div>
              <span class="ml-1 mr-2">{{ filesInfo?.zjjzr }}</span>
              {{ filesInfo?.zjghsj || '-' }}
            </div>
          </div>
          <!-- <LabelValue label="最近接诊" :value="filesInfo?.zjghsj" :width="280" label-class="text-grey ml-16" /> -->
        </div>
        <div class="flex px-4 mt-2">
          <div class="text-grey">最近诊断 <span> :</span></div>
          <div class="flex-1 ml-1">{{ filesInfo?.zjzd || '-' }}</div>
        </div>
        <div class="px-4">
          <a-divider dashed />
        </div>
        <div class="mt-2 px-4">
          <CustomerLabel ref="customerLabel" :br-id="filesInfo.brId" />
        </div>
      </div>
    </template>
    <span class="cursor-pointer"><slot></slot></span>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="onSuccess" />
    <EditBooking v-model:open="editBooking" :row-data="rowData" @success="onSuccess" />
  </a-popover>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import CustomerLabel from '@/components/CustomerLabel'
import Edit from '@/components/PatientFiles'
import { get } from '@/utils/request'
import { formatAmount } from '@/utils/format.js'
import EditBooking from './EditBooking'

const emit = defineEmits(['change'])

const editOpen = ref(false)
const open = ref(false)
const editBooking = ref(false)
const customerLabel = ref(null)
const rowData = ref({})
const filesInfo = ref({})
const tableData = ref([])
const loading = ref(false)

const props = defineProps({
  patientInfo: {
    type: Object,
    description: '病人信息',
    default: () => ({})
  }
})
const getData = async () => {
  if (props.patientInfo?.brId) {
    loading.value = true
    const { code, data } = await post('/outp/mzdj/getBookingList', { brId: props.patientInfo?.brId || '' })
    if (code !== 0) return
    tableData.value = data
    loading.value = false
  }
}

const onEdit = () => {
  rowData.value = { ...filesInfo.value }
  rowData.value.jksy = 2
  editOpen.value = true
}

// 获取患者信息
const getPatientInfo = async () => {
  if (props.patientInfo.brId) {
    const { code, data = {} } = await get('/common/patient/getPatientInfo?br_id=' + props.patientInfo.brId)
    if (code !== 0) return message.error('获取患者信息失败')
    filesInfo.value = { ...data }
  } else {
    return message.error('患者ID为空')
  }
}
const onEditBooking = async (row) => {
  rowData.value = { ...row }
  editBooking.value = true
}
const onSuccess = () => {
  getData()

  emit('change')
}
watch(open, (val) => {
  if (val) {
    getData()
    getPatientInfo()
  }
})
onMounted(() => {
  customerLabel.value?.getTagsList()
  // filesInfo.value = { ...props.patientInfo }
})
watch(
  () => props.patientInfo,
  () => {
    customerLabel.value?.getTagsList()
    getData()
    getPatientInfo()
    // filesInfo.value = { ...props.patientInfo }
  }
)
</script>
<style lang="less" scoped></style>
